<template>
  <view class="flex-1">
    <!-- <view
      class="text-theme font-bold text-xl mx-auto text-center mb-6 mt-[56rpx]"
      >体育评分标准</view
    >
    <view class="pr-4 pl-5">
      <customSteps current="2" />
    </view> -->
    <view class="px-4 pt-2">
      <view
        v-if="settingInfo.innerPic"
        class="w-full h-[379rpx] rounded-xl flex justify-center items-center overflow-hidden"
      >
        <image
          :src="settingInfo.innerPic"
          class="w-full"
          mode="aspectFit"
          @click="changeTab(2)"
        ></image
      ></view>
    </view>
    <view class="w-full px-[24rpx] mt-[44rpx]">
      <view class="flex items-end">
        <view
          @click="activeIdx = 0"
          :class="activeIdx == 0 ? 'a-active brs1' : 'n-active brs3'"
          class="w-1/2 flex items-center justify-center"
        >
          单人计算
        </view>
        <view
          @click="activeIdx = 1"
          :class="activeIdx == 1 ? 'a-active brs4' : 'n-active brs2'"
          class="w-1/2 flex items-center justify-center"
        >
          多人批量计算
        </view>
      </view>
      <view class="bg-[#3889FF] w-full h-[12rpx]"></view>
    </view>
    <template v-if="activeIdx == 0">
      <view class="pl-[52rpx] flex items-center mt-[78rpx] mb-6">
        <view class="text-xl font-bold text-[#303133]">性别：</view>
        <view class="aaaa">
          <uni-data-select
            :clear="false"
            v-model="state.sex"
            :localdata="range"
            @change="change"
          ></uni-data-select
        ></view>
      </view>
      <view class="px-3">
        <view
          class="flex items-center bg-[#4365DE] rounded-[40rpx] px-[44rpx] text-xl font-bold text-white mb-[52rpx]"
        >
          <view class="leading-[36rpx] py-[12rpx] w-1/4">项目</view>
          <view class="leading-[36rpx] py-[12rpx] w-1/2 text-center"
            >成绩录入</view
          >
          <view class="leading-[36rpx] py-[12rpx] w-1/4 text-right">得分</view>
        </view>
      </view>
      <view class="px-[42rpx]">
        <view class="mt-[36rpx]" v-for="(a, idx) in list" :key="idx">
          <view class="pb-[12rpx] px-[10rpx] flex flex-col" v-if="a.name">
            <view class="flex items-center mb-[14rpx]">
              <view class="w-2 h-2 bg-[#B3B6BD]"></view>
              <view class="flex items-center">
                <view class="pl-[20rpx] font-bold text-xl text-[#303133]">{{
                  a.name
                }}</view>
                <view class="pr-3 pl-5 text-[#303133] text-base">
                  {{ a.list.length }}选1输入：</view
                >
              </view>
            </view>
          </view>
          <template v-for="(item, index) in a.list" :key="index">
            <view
              class="flex items-center justify-between text-xl font-bold text-black px-[10rpx] pb-[10rpx]"
              :class="{ line: idx == list.length - 1 }"
              v-if="a.project == item.score_id"
            >
              <view class="py-[12rpx] font-bold w-[196rpx]">
                <!-- <view class="text-[#606266] text-xl">{{
                  item.project_name
                }}</view>
                <view
                  v-if="item.values"
                  class="text-[#AFAFAF] leading-[56rpx] text-base"
                  >{{ item.show_unit }}</view
                > -->
                <view class="flex items-center bbbb">
                  <uni-data-select
                    v-if="a?.project"
                    :clear="false"
                    v-model="a.project"
                    :localdata="a.list"
                    @change="(e) => changeScore(e, idx)"
                  ></uni-data-select>
                </view>
              </view>
              <view
                class="leading-[36rpx] py-[12rpx] flex items-end justify-center w-full"
              >
                <!-- <template v-for="(v, i) in item.show_unit" :key="v"> -->
                <view class="w-[285rpx]">
                  <input
                    class="iiiii"
                    placeholderClass="hhhhh"
                    type="digit"
                    @input="
                      (e) => handleScore(item, item.values, idx, index, i)
                    "
                    v-model="item.values"
                    :placeholder="item.show_unit + '，如' + item.show_val"
                    border="bottom"
                  />
                </view>
                <!-- <text class="px-[12rpx]"> {{ v.name }}</text> -->
                <!-- </template> -->
              </view>
              <view class="leading-[36rpx] py-[12rpx] w-[80rpx] text-right">{{
                item.socre || "无"
              }}</view>
            </view>
          </template>
        </view>
      </view>
      <view class="mt-[36rpx]">
        <view
          class="flex justify-between items-center text-xl font-bold text-black px-[52rpx] mb-[40rpx]"
        >
          <view>总得分</view>
          <view>{{ info.score_total ? info.score_total : "无" }} </view>
        </view>
        <view
          class="flex justify-between items-center text-xl font-bold text-black px-[52rpx] mb-[60rpx]"
        >
          <view>评级</view>
          <view>{{ info.level_name ? info.level_name : "无" }} </view>
        </view>
        <view class="px-[38rpx] flex justify-between pb-[30rpx]">
          <view
            @click="changeTab(0)"
            :class="active === 0 ? 'active' : 'bor'"
            class="w-[190rpx] h-[72rpx] leading-[72rpx] text-center font-bold text-xl rounded-lg"
          >
            计算成绩
          </view>
          <view
            @click="changeTab(1)"
            :class="active === 1 ? 'active' : 'bor'"
            class="w-[190rpx] h-[72rpx] leading-[72rpx] text-center font-bold text-xl rounded-lg"
          >
            保存成绩
          </view>
          <view
            @click="changeTab(2)"
            :class="active === 2 ? 'active' : 'bor'"
            class="w-[190rpx] h-[72rpx] leading-[72rpx] text-center font-bold text-xl rounded-lg"
          >
            咨询私教
          </view>
        </view>
        <view class="px-5" v-if="info?.score_user?.feedback_status == 2">
          <view class="mt-[14rpx] text-[#303133] text-[36rpx] font-bold">
            <view class="bbb pb-[20rpx]"> 提高方案 </view>
          </view>
          <view class="mt-[60rpx] pb-[128rpx]">
            <view class="flex items-center mb-[40rpx]">
              <image
                :src="info.score_user.teacher.icon_image"
                class="w-[84rpx] h-[84rpx] rounded-full"
              ></image>
              <view class="pl-[34rpx] text-[#606266] text-base leading-[45rpx]">
                <view>{{ info.score_user.teacher.teacher_name }}</view>
                <view>{{ info.score_user.teacher.school }}</view>
              </view>
            </view>
            <up-parse :content="info.score_user.feedback_content"></up-parse>
          </view>
        </view>
      </view>
    </template>
    <view v-else>
      <view class="mt-[106rpx] px-[30rpx]" v-if="isLogin">
        <view
          @click="downFile"
          class="text-xl font-bold px-[18rpx]"
          :class="!isUpload.show ? 'text-black' : 'text-[#606266]'"
        >
          下载 <text class="pl-[10rpx] text-[#3371CB]">批量计算模板</text>
        </view>
        <view
          v-if="!isUpload.show"
          class="mx-auto mt-[170rpx] mb-[242rpx] w-[268rpx] h-[76rpx] flex justify-center items-center bg-[#3889FF] rounded-lg"
        >
          <view
            @click="checkAuth"
            class="text-[36rpx] text-[#F4F4F4] pr-[28rpx] font-bold"
            >上传文件</view
          >
          <image src="@/static/cloud.png" class="w-[44rpx] h-[44rpx]"></image>
        </view>
        <template v-else>
          <view class="mt-[62rpx] pl-[58rpx] text-[#303133] text-xl font-bold">
            <view class="pt-3">
              上传完成，本次任务编号
              <text class="pl-[14rpx] text-[#3371CB]">{{
                isUpload.taskId
              }}</text>
            </view>
            <view class="pt-3"
              >后台处理预约完成时间
              <text class="pl-[14rpx] text-[#3371CB]">{{
                isUpload.time
              }}</text></view
            >
            <view class="pt-3">请在“我的”->”批量处理任务”下载</view>
          </view>
          <view
            class="mx-auto mt-[96rpx] mb-[108rpx] w-[268rpx] h-[76rpx] flex justify-center items-center bg-[#3889FF] rounded-lg"
          >
            <view
              @click="uploadFile"
              class="text-[36rpx] text-[#F4F4F4] pr-[28rpx] font-bold"
              >重新上传</view
            >
            <image
              src="@/static/cloud.png"
              class="w-[44rpx] h-[44rpx]"
            ></image> </view
        ></template>
        <view>
          <view class="mb-[14rpx] flex items-center">
            <image src="@/static/tip.png" class="w-[44rpx] h-[44rpx]"></image>
            <text class="pl-[20rpx] text-[#303133] text-xl font-bold"
              >使用注意事项</text
            >
          </view>
          <view class="text-[#606266] text-base leading-[50rpx] pb-[100rpx]">
            <view>1. 请先下载模板</view>
            <view>2. 编辑过程中请不要修改表头和字段名 </view>
            <view> 3. 如果某行成绩不完整，本行成绩不做处理 </view>
            <view @click="goToNote" class="text-[#FD3838]"> 4. 点击查看多人批量计算步骤说明 </view>
          </view>
        </view>
      </view>
      <view v-else class="mt-[206rpx] w-full flex flex-col items-center">
        <image src="@/static/eeee.png" class="w-[484rpx] h-[360rpx]"></image>
        <view class="mt-4 text-base text-center text-[#909399]"
          >批量处理功能必须是登录用户</view
        >
        <view
          @click="handleLogin"
          class="w-[190rpx] h-[72rpx] mt-[90rpx] rounded-lg leading-[72rpx] bg-[#3889FF] text-xl text-[#F4F4F4] font-bold text-center"
          >注册登录</view
        >
      </view>
    </view>

    <up-overlay :show="show">
      <view
        class="flex flex-col items-center h-full justify-center pb-10"
        @click.stop
      >
        <view
          class="w-[530rpx] h-[618rpx] bg-white rounded-[20rpx] pt-[56rpx] px-5 pb-6 flex flex-col items-center"
        >
          <view class="text-black font-bold text-base">
            {{ showImg.title }}
          </view>
          <view
            class="text-xs text-[#4C4C4] leading-5 text-center px-1 mt-[30rpx] mb-2"
          >
            <view> {{ showImg.content }}</view>
          </view>
          <image
            show-menu-by-longpress
            :src="showImg.url"
            class="w-[360rpx] h-[360rpx]"
            mode="widthFix"
          ></image>
          <view class="text-[#858585] text-base leading-4 mt-2"
            >长按识别二维码</view
          >
        </view>
        <image
          @click="show = false"
          src="@/static/close.png"
          class="w-8 h-8 mt-5"
        ></image>
      </view>
    </up-overlay>
    <u-modal
      confirmColor="#2D7DF2"
      confirmText="复制"
      :showCancelButton="true"
      :show="showDown"
      @confirm="copyUrl"
      @cancel="showDown = false"
    >
      <view class="px-2">
        <view class="text-[#303133] font-bold text-xl leading-[46rpx]">
          {{ downTitle }}
        </view>
        <view
          class="mt-[30rpx] text-xs text-[#909399]"
          style="font-weight: 300; word-break: break-all"
        >
          {{ downUrl }}
        </view>
      </view>
    </u-modal>
  </view>
</template>

<script setup lang="ts">
import { throttle, debounce } from "lodash";
import {
  getScoreItems_api,
  calScoreItem_api,
  saveScore_api,
  calScoreTotal_api,
  checkBatch_api,
  downloadTemplate_api,
  uploadTemplate_api,
  getUploadPath_api,
} from "@/api/index.js";
import uniDataSelect from "@/uni_modules/uni-data-select/components/uni-data-select/uni-data-select.vue";
import { ref, reactive, computed, watch } from "vue";
import { useUserStore } from "@/stores/user.js";
import { onLoad, onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";
const userStore = useUserStore();
const isLogin = computed(() => userStore.isLogin);
const settingInfo = computed(() => userStore.setting);
const platform = uni.getSystemInfoSync().platform;
const showDown = ref(false);
const downUrl = ref("");
const downTitle = ref("");

onShareAppMessage(() => {
  return {
    title: "钧韬竞速",
    path: `/pages/index/index`,
  };
});
onShareTimeline(() => {
  return {
    title: "钧韬竞速",
    query: `/pages/index/index`,
  };
});
const isUpload = ref({
  show: false,
  filePath: "",
  taskId: "",
  time: "",
});

const value = ref(1);
const range = ref([
  { value: 1, text: "男" },
  { value: 2, text: "女" },
]);

const showImg = ref({
  url: "",
  title: "",
  content: "",
});
const activeIdx = ref(0);
const state = reactive({
  sex: 1,
  area_id: "",
  score_type: "",
});

const active = ref(0);
const show = ref(false);
const change = (e) => {
  state.sex = e;
  getList();
};
const changeTab = (index) => {
  // active.value = index;
  if (!index) return calcScore();
  if (index == 1) {
    if (!info.value.level_code)
      return uni.showToast({
        title: "请先计算成绩",
        icon: "none",
      });
    const data = {
      scores: list.value
        .reduce((a, b) => {
          a.push(...b.list);
          return a;
        }, [])
        .map((e) => {
          return {
            sport_score_id: e.score_id, //评分项目ID
            point: e.socre || 0, //得分
            score: e.point || 0, //成绩，如果单位代码是ms时，需要将其转为分钟数提交，支持浮点类型
            unit: e.unit, //单位代码
          };
        }),
      score_total: info.value.score, //总评分
      area_id: state.area_id, //地区ID
      score_type: state.score_type, //类别
      sex: state.sex, //性别
      teacher_id: info.value.score_user?.teacher.id,
    };
    console.log(data);
    saveScore_api(data)
      .then((res) => {
        console.log(res);
        if (res.code == 1) {
          uni.showModal({
            title: "温馨提示",
            content: "你的本次成绩已保存",
            icon: "none",
            showCancel: false,
            success: () => {
              if (uni.getStorageSync("redirectUrl")) {
                uni.removeStorageSync("redirectUrl");
              }
            },
          });
        } else {
          uni.showModal({
            title: "温馨提示",
            content: res.msg,
            icon: "none",
            showCancel: false,
            success: () => {},
          });
        }
      })
      .catch((err) => {
        console.log(err);
        if (err.code == 401) {
          uni.showModal({
            title: "温馨提示",
            content: "保存成绩请先登录",
            icon: "none",
            confirmText: "前往登录",
            success: (res) => {
              if (res.confirm) {
                uni.setStorageSync("redirectUrl", {
                  tab: activeIdx.value,
                  area_id: state.area_id,
                  score_type: state.score_type,
                });
                return uni.switchTab({
                  url: "/pages/my/my",
                });
              }
            },
          });
        }
      });
    return;
  }
  if (index == 2) {
    show.value = true;
    showImg.value.url = settingInfo.value.privateTeacher;
    showImg.value.title = "咨询私教";
    showImg.value.content = "请通过下方微信二维码添加私教";
  }
};

const calcScore = () => {
  uni.showLoading({
    title: "正在计算...",
  });
  const num = list.value
    .reduce((a, b) => {
      a.push(...b.list);
      return a;
    }, [])
    .reduce((acc, cur) => {
      return acc * 1 + (cur.socre * 1 || 0);
    }, 0);
  console.log(num);
  info.value.score = num;
  calScoreTotal_api({
    score_total: num,
    area_id: state.area_id,
    score_type: state.score_type,
    sex: state.sex,
    scores: list.value
      .reduce((a, b) => {
        a.push(...b.list);
        return a;
      }, [])
      .map((e) => {
        return {
          sport_score_id: e.score_id, //评分项目ID
          point: e.socre || 0, //得分
          score: e.point || 0, //成绩，如果单位代码是ms时，需要将其转为分钟数提交，支持浮点类型
          unit: e.unit, //单位代码
        };
      }),
  })
    .then((res) => {
      info.value.level_code = res.level_code;
      info.value.level_name = res.level_name;
      info.value.score_total = res.score_total;
      info.value.score_user = res;
      uni.hideLoading();
    })
    .catch((err) => {
      uni.hideLoading();
    });
};

const list = ref([]);
const info = ref({
  score: "",
  level_code: "",
  level_name: "",
  score_total: "",
  score_user: {},
});
const getList = (area_id) => {
  getScoreItems_api(state).then((res) => {
    info.value = {
      ...res,
      score: "",
    };
    list.value = res.score_res.map((e) => {
      return {
        ...e,
        project: e.list.length && e.list[0].score_id,
        list: e.list.map((a) => {
          return {
            ...a,
            socre: "",
            values: "",
            text: a.project_name,
            value: a.score_id,
            // unit_name: a.unit_name.map((b) => {
            //   return {
            //     value: "",
            //     name: b,
            //   };
            // }),
          };
        }),
      };
    });
    console.log(list.value, "list.valuelist.value");
  });
};

const fomtrTime = (item) => {
  if (item.name == "秒") {
    return item.value * 1;
  }
  if (item.name == "分") {
    return item.value * 60;
  }
};

const formatMin = (ms) => {
  return ms / 60;
};

const handleScore = debounce((item, value, idx, index, i) => {
  // console.log(item, value, idx, index, i);
  if (!value) {
    list.value[idx].list[index].socre = "0";
    list.value[idx].list[index].point = 0;
    return;
  }
  item.point = value;
  calScoreItem_api({
    score_id: item.score_id,
    score: value || 0,
  }).then((res) => {
    console.log(res);
    list.value[idx].list[index].socre = res.point;
    console.log(list.value, "list.valuelist.value");
  });
}, 600);

const handleLogin = () => {
  uni.setStorageSync("redirectUrl", {
    tab: activeIdx.value,
    area_id: state.area_id,
    score_type: state.score_type,
  });
  uni.switchTab({
    url: "/pages/my/my",
  });
};

const copyUrl = () => {
  uni.setClipboardData({
    data: downUrl.value,
    success: () => {
      uni.$u.toast("复制成功");
      showDown.value = false;
    },
  });
};

const downFile = () => {
  downloadTemplate_api({
    area_id: state.area_id,
    score_type: state.score_type,
  }).then((res) => {
    console.log(res);
    if (platform == "windows" || platform == "mac") {
      showDown.value = true;
      downUrl.value = res.url;
      downTitle.value =
        "您当前在电脑中使用小程序，请复制 下面地址在浏览器中下载至本地";
      return;
    }
    down(res.url);
  });
};

const uploadFile = () => {
  if (platform == "windows" || platform == "mac") {
    getUploadPath_api({
      area_id: state.area_id,
      score_type: state.score_type,
    }).then((res) => {
      console.log(res);
      showDown.value = true;
      downTitle.value =
        "您当前在电脑中使用小程序，请复制 下面地址在浏览器中上传";
      downUrl.value = res.url;
    });
    return;
  }
  uni.chooseMessageFile({
    count: 1,
    type: "file",
    extensions: [".xlsx", ".xls"],
    success: async (res) => {
      console.log(res, "选择的文件");
      try {
        uni.showLoading({
          title: "正在上传...",
        });
        const result = await uploadTemplate_api({
          filePath: res.tempFiles[0].path,
          name: "file",
          ...(isUpload.value.taskId
            ? {
                formData: {
                  task_id: isUpload.value.taskId,
                },
              }
            : {}),
        });
        if (result.code == 1) {
          isUpload.value.show = true;
          isUpload.value.taskId = result.data.task_id;
          isUpload.value.time = result.data.estimated_time;
          if (uni.getStorageSync("redirectUrl")) {
            uni.removeStorageSync("redirectUrl");
          }
        } else {
          uni.showToast({
            title: result.msg,
            icon: "none",
          });
        }

        console.log(result);
      } finally {
        uni.hideLoading();
      }
    },
  });
};

const down = (url) => {
  uni.showLoading({
    title: "正在下载...",
  });
  const file = url;
  uni.downloadFile({
    //只能是GET请求
    url: file, //请求地址(后台返回的码流地址)
    // filePath: wx.env.USER_DATA_PATH + "/download/体育成绩.xlsx", //保存到本地的路径
    success: (res) => {
      //下载成功
      if (res.statusCode === 200) {
        uni.hideLoading(); //隐藏加载框
        //保存文件
        var tempFile = res.tempFilePath;
        console.log(tempFile, res, "tempFilePath");
        //保存成功之后 打开文件
        uni.openDocument({
          filePath: tempFile,
          showMenu: true, //微信小程序 downloadFile生成的tempFilePath为临时路径无法直接保存到手机 显示菜单设置可以手动保存到手机本地
          fail: (e) => {
            console.log(e, "打开失败");
            let nowEno = uni.getSystemInfoSync().platform; //当前环境
            console.log(e, "打开失败", nowEno);
            if (nowEno == "ios") {
              //ios打开临时路径文件失败 设置ios环境下读取临时路径文件可以打开
              uni.getFileSystemManager().readFile({
                filePath: tempFile,
                success: (res) => {
                  var filebuffer = res.data;
                  return filebuffer;
                },
                fail: console.error,
              });
            } else {
              uni.showToast({
                title: "打开失败",
              });
            }
          },
        });
      } else {
        uni.hideLoading();
      }
    },
    fail: (e) => {
      uni.hideLoading();
      console.log(e, "文件下载失败");
      uni.showToast({
        title: "文件下载失败",
        icon: "none",
      });
    },
  });
};

const checkAuth = () => {
  checkBatch_api().then((res) => {
    console.log(res);
    if (res.code == 1) {
      uploadFile();
    } else {
      showImg.value.url = res.data.qr_code;
      showImg.value.title = "暂时无批量处理权限";
      showImg.value.content = "请通过下方微信二维码添加管理员咨询";
      show.value = true;
    }
  });
};

onLoad(({ id, type, tab = 0 }) => {
  state.area_id = id;
  state.score_type = type;
  activeIdx.value = tab;
  getList();
});

const changeScore = (e, index) => {
  console.log(e, index);
  list.value[index].list.forEach((e) => {
    e.socre = "";
    e.point = "";
    e.values = "";
  });
};

const goToNote = () => {
  uni.navigateTo({
    url: `/pages/my/webView?type=step`,
  });
};

// watch(
//   () => list.value,
//   () => {
//     calcScore();
//   },
//   { deep: true }
// );
</script>

<style lang="scss">
.bbbb {
  :deep(.uni-select) {
    width: 236rpx !important;
    border-radius: 16rpx;
    padding-left: 24rpx;
    .uni-select__input-box {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .uni-select__selector-item {
      font-weight: 400;
      font-size: 28rpx;
      color: #303133;
    }
    .uni-select__input-text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #303133;
    }
    .uni-icons {
      font-size: 36rpx !important;
    }
  }
}
.bbb {
  border-bottom: 2rpx solid #d1d1d1;
}
.aaaa {
  :deep(.uni-select) {
    width: 178rpx !important;
    border-radius: 16rpx;
    padding-left: 24rpx;
    .uni-select__input-text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 700;
      font-size: 32rpx;
      color: #303133;
    }
    .uni-icons {
      font-size: 36rpx !important;
    }
  }
}
:deep(.u-border-bottom) {
  border-bottom: 2rpx solid #000000 !important;
}
.line {
  padding-bottom: 56rpx;
  border-bottom: 2rpx solid #d1d1d1;
}

.active {
  background-color: #3889ff;
  color: #fff;
}

.bor {
  color: #000000;
  background-color: #fff;
  border: 2rpx solid #3889ff;
}
.iiiii {
  padding-left: 4rpx !important;
  padding-right: 4rpx !important;
  padding-bottom: 6rpx !important;
  font-size: 32rpx !important;
  border-bottom: 2rpx solid #000000 !important;
}
:deep(.u-input) {
  padding-left: 4rpx !important;
  padding-right: 4rpx !important;
  padding-bottom: 6rpx !important;
  font-size: 26rpx !important;
}

.a-active {
  font-family: PingFang SC, PingFang SC;
  font-weight: 700;
  font-size: 32rpx;
  color: #303133;
  background-color: #ffffff;
  height: 96rpx;
  box-shadow: 4rpx 0rpx 4rpx 0rpx rgba(0, 0, 0, 0.11);
}
.n-active {
  background: #e2e6fc;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 28rpx;
  color: #375289;
  height: 84rpx;
  background-color: #e2e6fc;
}

.brs1 {
  border-radius: 8rpx 8rpx 0rpx 0rpx;
}
.brs2 {
  border-radius: 0rpx 8rpx 0rpx 0rpx;
}
.brs3 {
  border-radius: 8rpx 0rpx 0rpx 0rpx;
}

.brs4 {
  border-radius: 8rpx 8rpx 0rpx 0rpx;
}
:deep(.hhhhh) {
  font-weight: 500;
  font-size: 26rpx;
  color: #afafaf;
  line-height: 56rpx;
}
</style>
